// Created by Bjorn Sandvik - thematicmapping.org
(function () {

	let camera, scene, renderer;
	let controls;
	init();
	animate();

	function init() {
		camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 3500000);
		controls = new THREE.TrackballControls(camera);
		camera.position.set(2000, 2000, 2000);
		camera.position.z = 500;
		scene = new THREE.Scene();

		const material = new THREE.MeshBasicMaterial({color: 0x00ff12, wireframe: true, opacity: 0.8});
		const geometry = new THREE.SphereGeometry(1790, 32, 32);
		const mesh = new THREE.Mesh(geometry, material);
		mesh.position.set(0, 1000, 0);
		scene.add(mesh);

		// renderer

		renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

		document.body.appendChild(renderer.domElement);
		renderer.setSize( window.innerWidth, window.innerHeight );
	}

	function animate() {
		controls.update();
		requestAnimationFrame( animate );
	}

	window.requestAnimFrame = (function(){
		return  window.requestAnimationFrame       ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame    ||
			window.oRequestAnimationFrame      ||
			window.msRequestAnimationFrame     ||
			function( callback ){
				window.setTimeout(callback, 1000 / 60);
			};
	})();

	(function animloop(){
		requestAnimFrame(animloop);
		render();
	})();

	function render() {
		renderer.render( scene, camera );
	}

}());